<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/highstock.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.hcharts.cn/plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/drag-panes.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/indicators.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/ema.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/macd.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/indicators/pivot-points.js"></script>
    <script type="text/javascript">
        // var chart;
        var path = window.document.location.href;
        var code = path.split('?')[1].split('=')[1];
        var params=window.document.location.search;

        const url = new URL(path);

        var code = url.searchParams.get('code'); // => 'hello'

        var flagLink = '/demark-backtrack-advance'+params;
        $(document).ready(function () {
            post();
        });

        var stockOptions = {
            rangeSelector: {
                selected: 4
            },
            title: {
                text: ''
            },
            yAxis: [{
                title: {
                    text: '价格'
                },
                height: '100%',
                resize: {
                    enabled: true
                },
                plotLines: [{
                    id: 'costPrice',
                    value: 0,
                    color: '#33AA11',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Demark'
                    }
                }, {
                    id: 'averagePrice',
                    value: 0,
                    color: '#DD2200',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: '平均定投'
                    }
                }]
            },{
                top: '75%',
                height: '25%',
                labels: {
                    align: 'right',
                    x: -3
                },
                offset: 0,
                title: {
                    text: 'MACD'
                }
            }
            ],
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: true
                    },
                    animation: {
                        // duration: 10000
                    }
                }
            },
            tooltip: {
                split: false,
                shared: false,
                pointFormat:'<span style="color:{point.color}">\u25cf</span> <b> {series.name}</b><br/>开盘: {point.open}<br/>最高: {point.high}<br/>最低: {point.low}<br/>收盘: {point.close}<br/>换手: {point.turnover}%<br/>涨幅: {point.rise}%<br/>',
                valueDecimals: 2
                // pointFormatter: function() {
                //     console.log(this);
                //     var o=this.series.name;
                //     return '你好'
                // }
            },
            series: [{
                type: 'candlestick',
                name: "stock name",
                color: 'green',
                lineColor: 'green',
                upColor: 'red',
                upLineColor: 'red',
                navigatorOptions: {
                    color: Highcharts.getOptions().colors[0]
                },
                data: [],
                keys: ['x', 'open', 'high', 'low','close','turnover','rise'],
                id: 'dataseries',
                tooltip: {
                    valueDecimals: 2
                }
            },
                {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'circlepin',
                    width: 16,
                    color: '#e97b25',
                    fillColor: '#e97b25',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#bsCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'circlepin',
                    width: 16,
                    color: '#ef270d',
                    fillColor: '#ef270d',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#bcCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'squarepin',
                    width: 16,
                    color: '#0def73',
                    fillColor: '#0def73',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#ssCheckbox").is(':checked')
                }, {
                    type: 'flags',
                    data: null,
                    onSeries: 'dataseries',
                    shape: 'squarepin',
                    width: 16,
                    color: '#0a8ff1',
                    fillColor: '#0a8ff1',
                    style: { // text style
                        color: 'white'
                    },
                    visible: $("#scCheckbox").is(':checked')
                }, {
                    type: 'macd',
                    yAxis: 1,
                    linkedTo: 'dataseries',
                    color: 'rgba(24,180,191,0.94)'
                }]
        };

        function post() {
            var days = $("#days").val();
            var t = $('input:radio[name="t"]:checked').val();
            var linkNew = flagLink + '&t2Now=' + days + '&t=' + t;
            getFlagsData(linkNew);
        }

        function createChart(data) {
            var setupFlag = [];
            var countdownFlag = [];
            if (data.flag != null) {
                for (var i = 0; i < data.flag.length; i++) {
                    //准备setup 数据
                    var setupObj = {};
                    setupObj.x = data.flag[i].setup;
                    setupObj.title = 'BS';
                    setupObj.text = '(' + data.flag[i].setupNumber + 'T,Setup) ' + data.flag[i].setupDate;
                    setupFlag.push(setupObj);
                    //准备countdown 数据
                    var countdownObj = {};
                    countdownObj.x = data.flag[i].countdown;
                    countdownObj.title = 'BC';
                    countdownObj.text = '(' + data.flag[i].countdownNumber + 'T,Countdown) ' + data.flag[i].countdownDate;
                    countdownFlag.push(countdownObj);
                }
            }
            var sellSetupFlag = [];
            var sellCountdownFlag = [];
            if (data.flagSell != null) {
                for (var i = 0; i < data.flagSell.length; i++) {
                    //准备setup 数据
                    var setupObj = {};
                    setupObj.x = data.flagSell[i].setup;
                    setupObj.title = 'SS';
                    setupObj.text = '(' + data.flagSell[i].setupNumber + 'T,Setup) ' + data.flagSell[i].setupDate;
                    sellSetupFlag.push(setupObj);
                    //准备countdown 数据
                    var countdownObj = {};
                    countdownObj.x = data.flagSell[i].countdown;
                    countdownObj.title = 'SC';
                    countdownObj.text = '(' + data.flagSell[i].countdownNumber + 'T,Countdown) ' + data.flagSell[i].countdownDate;
                    sellCountdownFlag.push(countdownObj);
                }
            }

            stockOptions.title.text = data.name + ' ' + data.code;

            //bars for rise percentage
            // {dateMilliSeconds, bar.getOpen(), bar.getHigh(), bar.getLow(), bar.getClose(),bar.getTurnoverRate()}
            var bars = data.bars;
            var dataLength = bars.length;
            for (i = 0; i < dataLength; i++) {
                if (i > 0) {
                    change = (bars[i][4] - bars[i - 1][4]) / bars[i - 1][4] * 100;
                } else {
                    change = 0;
                }
                bars[i][5]=Highcharts.numberFormat(bars[i][5],2);
                bars[i][6]=Highcharts.numberFormat(change,2);
            }
            //bars data
            stockOptions.series[0].name = data.name;
            stockOptions.series[0].data = data.bars;

            //flags
            stockOptions.series[1].data = setupFlag;
            stockOptions.series[2].data = countdownFlag;
            stockOptions.series[3].data = sellSetupFlag;
            stockOptions.series[4].data = sellCountdownFlag;

            stockOptions.series[1].visible = $("#bsCheckbox").is(':checked');
            stockOptions.series[2].visible = $("#bcCheckbox").is(':checked');
            stockOptions.series[3].visible = $("#ssCheckbox").is(':checked');
            stockOptions.series[4].visible = $("#scCheckbox").is(':checked');

            //成本价格线
            if(data.profit1!=null){
                stockOptions.yAxis[0].plotLines[0].value = data.profit1.averageCostPrice;
                stockOptions.yAxis[0].plotLines[0].label.text = "DeMark定投成本价格" + data.profit1.averageCostPrice.toFixed(2) + "元";
            }
            if(data.profit2!=null) {
                stockOptions.yAxis[0].plotLines[1].value = data.profit2.averageCostPrice;
                stockOptions.yAxis[0].plotLines[1].label.text = "平均定投成本价格" + data.profit2.averageCostPrice.toFixed(2) + "元";
            }

            // stockOptions.plotOptions.series.animation.duration=10000;
            chart = Highcharts.stockChart('container', stockOptions);
        }

        function getFlagsData(link) {
            Highcharts.getJSON(link, function (data) {
                createChart(data);
            });
        }

        function checkboxOnclick(checkboxId, selected) {
            if (checkboxId == 'bsCheckbox') {
                chart.series[1].setVisible(selected);
            } else if (checkboxId == 'bcCheckbox') {
                chart.series[2].setVisible(selected);
            } else if (checkboxId == 'ssCheckbox') {
                chart.series[3].setVisible(selected);
            } else if (checkboxId == 'scCheckbox') {
                chart.series[4].setVisible(selected);
            }
        }
    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">计算最近多少T的数据</label>
                    <div class="control">
                        <input id="days" class="input" type="text" name="days" value="200">
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="bsCheckbox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('bsCheckbox',this.checked)">
                                Buy-Setup 九天揽月
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="bcCheckbox" type="checkbox" checked=“checked”
                                       onclick="checkboxOnclick('bcCheckbox',this.checked)">
                                Buy-Countdown 十三太保
                            </label>
                        </div>
                    </div>
                </div>

                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="ssCheckbox" type="checkbox"
                                       onclick="checkboxOnclick('ssCheckbox',this.checked)">
                                Sell-Setup 九九归天
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="scCheckbox" type="checkbox"
                                       onclick="checkboxOnclick('scCheckbox',this.checked)">
                                Sell-Countdown 十三惊魂
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-1">
            </div>
            <div class="column is-2">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <label class="label">查看周期T</label>
                            <label class="radio">
                                <input type="radio" name="t" value='daily' onclick="post()" >
                                按日
                            </label>
                            <label class="radio">
                                <input type="radio" name="t" value='weekly' onclick="post()" checked>
                                按周
                            </label>
                            <label class="radio">
                                <input type="radio" name="t" value='monthly' onclick="post()">
                                按月
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
<section class="section">
    <div class="container">
        <div id="container" style="min-width:400px;height:800px"></div>
    </div>
</section>

<hr>
</body>
</html>
